<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-search"></i> 筛选查询</div>
                        <div>
                            <el-button @click.native="selectResults">查询结果</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item class="select-div" label="活动标题：">
                                <el-input placeholder="活动标题" class="input-width" v-model="form.name" clearable></el-input>
                            </el-form-item>、
                            <el-form-item class="select-div margin-left" label="活动状态：" >
                                <el-select class="input-width" v-model="form.state" placeholder="全部" clearable>
                                    <el-option label="未开始" value="0"></el-option>
                                    <el-option label="进行中" value="1"></el-option>
                                    <el-option label="已结束" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>
            </el-main>

            <el-footer>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i> 数据列表</div>
                        <div>
                            <el-button @click="addexport">添加活动</el-button>
                        
                            <el-select v-model="sort" class="input-width2" placeholder="排列方式">
                                <el-option label="活动名称" :value="0" ></el-option>
                                  <el-option label="开始时间" :value="1" ></el-option>
                            </el-select>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData"  border style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="id" label="编号" width="120"></el-table-column>
                            <el-table-column prop="title" label="活动标题" width="190"></el-table-column>
                            <el-table-column prop="startTime" label="开始时间"> </el-table-column>
                            <el-table-column prop="endTime" label="结束时间"> </el-table-column>
                            <el-table-column label="上线/下架" width="120">
                                <template slot-scope="scope"><el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0" disabled></el-switch></template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="70"> 
                                <template slot-scope="scope">

                                     <p v-if="scope.row.status=='0'">未开始</p>
                                     <p v-if="scope.row.status=='1'">进行中</p>
                                     <p v-if="scope.row.status=='2'">已结束</p>
                                </template>
                                           


                            </el-table-column>
                            <el-table-column label="操作" width="350">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="exportOrder(scope.$index, scope.row)">查看</el-button>
                                    <el-button  size="mini" @click="exportOrderTwo(scope.$index, scope.row)">编辑</el-button>
                                    <el-button  size="mini" @click="exportOrderThree(scope.$index, scope.row)">发布到广告</el-button>
                                    <el-button  size="mini" @click="deleteData(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
                        <el-select class="margin-left input-width2" v-model="moreOperation" placeholder="批量操作">
                            <el-option  label="删除" :value="1"></el-option>
                        </el-select>
                        <el-button class="margin-left" @click.native="confirm">确定</el-button>
                        <div class="paging-style">
                            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-footer>
        </el-container>

    </div>
</template>

<script>

import activityApi from "@/api/operate/acitivity"
    export default {
        data() {
            return {
                form:{
                    name:"",
                    state:"",
                },
               
                sort:0,
                multipleSelection: [],
                // 批量操作
                moreOperation:"",
                // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
    //   
                checkbox:false,
                tableData: [],
            }
        },
        watch:{


        "sort":function(){
this.intData();

        }
        },
        methods:{
            selectResults(){
               this.intData();
            },


            addexport(){
               this.$router.replace({ path: "/operation/addActivity" });  
            },
            exportOrder(index,row){
                this.$router.push({ path: "/operation/activitySelet",query:{id:row.id}});
            },
              exportOrderTwo(index,row){
                this.$router.push({ path: "/operation/activityRedact",query:{id:row.id}});
            },
              exportOrderThree(index,row){
                // this.$router.replace({ path: "/operation/activitySelet" });
            },

            handleSizeChange(val) {
               this.pageSize=val;
               this.intData();
            },
            handleCurrentChange(val) {
              this.currentPage1=val;
              this.intData();
            },
// 删除单条数据
            deleteData(index,row){

         let ids=[];
         ids[0]=row.id;
     
             this.delete(ids);
            },
            confirm(){

                if(this.moreOperation==1){

this.delete(this.multipleSelection);
                }else{
                    this.$message("操作错误，请选择操作类型");
                }
               
               
            },
            toggleSelectionCheckbox(){
                if(this.checkbox){
                    this.tableData.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                }else{
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection =[];
                if(val.length == this.tableData.length){
                    this.checkbox = true;
                }else if(val.length != this.tableData.length){
                    this.checkbox = false;
                };
                val.forEach(item=>{


                    this.multipleSelection[this.multipleSelection.length]=item.id;
                })

            },

// 获取页面基本数据
            intData(){


                let dto={
                    pageNum:this.currentPage1,
                    pageSize:this.pageSize,
                    title:this.form.name,
                    status:this.form.state,
                    sort:this.sort,

            
                };

                 activityApi.getList(dto.pageNum,dto.pageSize,dto.title,dto.status,dto.sort).then(response=>{

                     console.log(response);
                     this.tableData=response.data.data.list;
                     this.total=response.data.data.total;

                 });
            },

// 删除数据
            delete(ids){

                  activityApi.deleteList(ids).then(response=>{

                      console.log(response);
                      this.intData();
                      this.$message(response.data.message);
                  })
            }


        },

        created(){

            this.intData();
        }
    }
</script>

<style scoped>
    .badges {
        height: 60px;
        padding: 10px;
    }
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:200px;
    }
    .select-div{
        display: inline-block;
        width:300px;
    }
    .input-width2{
        width:120px;
    }
    .input-width3{
        width:400px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
    .margin-left{
        margin-left:10px;
    }
    .search-style{
        width:50%;
        display: inline-block;
        vertical-align: top;
    }
</style>

